<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/header.jsp" %>
    <script>
        $('#logo').remove()
    </script>
    <title>微学习</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/plugins/bootstrap4/css/bootstrap.min.css"/>

    <link rel="canonical" href="https://quilljs.com/standalone/full/">
    <link type="application/atom+xml" rel="alternate" href="https://quilljs.com/feed.xml"
          title="Quill - Your powerful rich text editor"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css"/>
    <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css"/>


    <%--layui--%>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <script src="${base}/layui/layui.js"></script>

    <script>
        $("#publish_article_nav").addClass("active")
    </script>
</head>
<body>
<style>
    .item {
        cursor: pointer;
    }

    .bold {
        font-weight: bold;
    }

    ul {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
    }
</style>


<div class="d-flex mt-5 flex-row" style="background-color: #eeeeee">

    <div class="d-flex flex-column mt-2 p-2" style="flex:7; ">
        <div id="grades" class="d-flex p-2">
            <form>
                <div id="subject_grade">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">年级：</span>
                        </div>
                        <select class="form-control" id="s_grade" onchange="getOutline()">
                            <c:forEach items="${grades}" var="g">
                                <option value="${g.grade_id}">${g.grade_name}</option>
                            </c:forEach>
                        </select>
                        <div class="input-group-prepend ml-5">
                            <span class="input-group-text">学科：</span>
                        </div>
                        <select class="form-control" id="s_subject" onchange="getOutline()">
                            <c:forEach items="${subjects}" var="s">
                                <option value="${s.subject_id}">${s.subject_name}</option>
                            </c:forEach>
                        </select>
                    </div>

                </div>

                <%--知识点大纲 start--%>

                <div id="outline" class="mt-2">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-light">知识点大纲：</span>
                        </div>
                        <select class="form-control" id="s_outline">
                        </select>
                        <%--<div class="layui-form-item">--%>
                        <%--<label for="tree" class="layui-form-label">测试</label>--%>
                        <%--<div class="layui-input-block">--%>
                        <%--<input type="text" id="tree" lay-filter="tree" class="layui-input">--%>
                        <%--</div>--%>
                        <%--</div>--%>
                    </div>
                </div>
                <%--知识点大纲 end--%>
                <div class="">
                    <div class="input-group mt-5">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-light">标题：</span>
                        </div>
                        <input type="text" class="form-control" name="title" id="title" required autofocus/>
                    </div>
                </div>
            </form>

        </div>
        <script>
            function getOutline() {
                var grade_id = $('#s_grade').val();
                var subject_id = $('#s_subject').val();
                var data = {}
                if (grade_id != 'undefined' && grade_id != "") {
                    data.grade_id = grade_id;
                }
                if (subject_id != 'undefined' && subject_id != "") {
                    data.subject_id = subject_id;
                }
                $.ajax({
                    url: '${base}/article/getOutline',
                    type: 'post',
                    data: data,
                    success: function (result) {
                        result = JSON.parse(result)
                        $('#s_outline').html('');
                        for (var i in result) {
                            var $option = $('<option value="' + result[i]['o_id'] + '">' + result[i].o_name + '</option>')
                            $('#s_outline').append($option)
                        }
                    }, error: function () {

                    }
                })
            }

            getOutline();
        </script>

        <div id="standalone-container">
            <div id="toolbar-container">
                <span class="ql-formats">
                    <select class="ql-font"></select>
                    <select class="ql-size"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-color"></select>
                    <select class="ql-background"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-script" value="sub"></button>
                    <button class="ql-script" value="super"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-header" value="1"></button>
                    <button class="ql-header" value="2"></button>
                    <button class="ql-blockquote"></button>
                    <button class="ql-code-block"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                    <button class="ql-indent" value="-1"></button>
                    <button class="ql-indent" value="+1"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-direction" value="rtl"></button>
                    <select class="ql-align"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-link"></button>
                    <button class="ql-image"></button>
                    <button class="ql-video"></button>
                    <button class="ql-formula"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-clean"></button>
                </span>
            </div>
            <div id="editor-container">

            </div>
            <div class="d-flex p-3">
                <button class="btn btn-success" id="submit_article">提交</button>
            </div>
        </div>
        <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"
                type="8d880c029f19ef17c7955496-text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"
                type="8d880c029f19ef17c7955496-text/javascript"></script>
        <script src="//cdn.quilljs.com/1.3.6/quill.min.js" type="8d880c029f19ef17c7955496-text/javascript"></script>
        <script type="8d880c029f19ef17c7955496-text/javascript">
          quill = new Quill('#editor-container', {
            modules: {
              syntax: true,
              toolbar: '#toolbar-container'
            },
            placeholder: '请输入.....',
            theme: 'snow'
          });


        </script>
        <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js"
                data-cf-nonce="8d880c029f19ef17c7955496-" defer=""></script>
        <script src="${base}/js/article/add.js"></script>
    </div>
    <%@include file="/WEB-INF/views/linkNav.jsp" %>
</div>
<div></div>
<%@include file="/WEB-INF/views/footer.jsp" %>
</body>
</html>
${pageContext.request.contextPath}